<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2017-2023 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<div class="localLoader" [class.hidden]="!isLoading()">
    <winery-loader></winery-loader>
</div>
<div *ngFor="let parentInterface of inheritedInterfacesData">
    <button class="btn-parent" (click)="toggleDiv(parentInterface)">
        <div class="parentTypeContainer">
            <i class="glyphicon" [ngClass]="parentInterface.is_shown? 'glyphicon-minus' : 'glyphicon-plus'"></i>
            Show interfaces inherited from
            <a href="{{ processUrl(parentInterface.parentType)[0] }}"
               title="Show interfaces inherited from {{parentInterface.parentType}}">
                <b>{{ processUrl(parentInterface.parentType)[1] }}</b>
            </a>
        </div>
        <div *ngIf="parentInterface.is_shown" class="parentInterfaceContainer">
            <div *ngIf="parentInterface.interfaces && parentInterface.interfaces.length > 0; else noInterfaces">
                <ul class="interfaces">
                    <li *ngFor="let inheritedInterface of parentInterface.interfaces">
                        <hr/>
                        <label class="interfacesLabel">
                            {{ inheritedInterface.name }}
                            <button *ngIf="interfaceDoesNotExist(inheritedInterface)" class="btn btn-info btn-xs"
                                    (click)="overrideInterface(inheritedInterface)">
                                Override Interface
                            </button>
                        </label>
                        <ul *ngFor="let operation of inheritedInterface.operations" class="ul-class">
                            <label class="operationLabel">{{operation.name}}</label>
                            <button *ngIf="operationDoesNotExists(inheritedInterface,operation)"
                                    class="btn btn-info btn-xs"
                                    (click)="overrideOperation(inheritedInterface,operation)">Override Operation
                            </button>
                            <br/>
                            <div class="table-class">
                                <div *ngIf="operation.inputParameters && operation.inputParameters.length > 0;
                                else noInputParameters">
                                    <table>
                                        <label>Input Parameters</label>
                                        <tr>
                                            <th>Name</th>
                                            <th>Type</th>
                                            <th>Required</th>
                                        </tr>
                                        <tr *ngFor="let input of operation.inputParameters">
                                            <td>{{ input.name }}</td>
                                            <td>{{ input.type }}</td>
                                            <td>{{ input.required }}</td>
                                        </tr>
                                    </table>
                                </div>
                                <ng-template #noInputParameters>
                                    No input parameters defined.
                                </ng-template>
                                <br/>
                                <div *ngIf="operation.outputParameters && operation.outputParameters.length > 0;
                                 else noOutputParameters">
                                    <table>
                                        <label>Output Parameters</label>
                                        <tr>
                                            <th>Name</th>
                                            <th>Type</th>
                                            <th>Required</th>
                                        </tr>
                                        <tr *ngFor="let output of operation.outputParameters">
                                            <td>{{ output.name }}</td>
                                            <td>{{ output.type }}</td>
                                            <td>{{ output.required }}</td>
                                        </tr>
                                    </table>
                                </div>
                                <ng-template #noOutputParameters>
                                    No output parameters defined.
                                </ng-template>
                            </div>
                            <br/>
                        </ul>
                    </li>
                </ul>
            </div>
            <ng-template #noInterfaces class="noInterface">
                No interfaces defined.
            </ng-template>
        </div>
    </button>
</div>
<br>
<div *ngIf="!isLoading()">
    <div class="right">
        <button class="btn btn-primary" [disabled]="!sharedData?.currentVersion?.editable" name="save" (click)="save()">
            Save
        </button>
    </div>

    <div style="display: inline-flex;">
        <winery-selectable-list #itemList
                                [title]="'Interfaces'"
                                [rows]="interfacesData"

                                (addButtonClicked)="addInterface()"
                                (selectionChanged)="onInterfaceSelect($event)"
                                (removeButtonClicked)="removeInterface()">
        </winery-selectable-list>
        <winery-selectable-list *ngIf="operations"
                                [title]="'Operations'"
                                [rows]="operations"
                                (addButtonClicked)="addOperation()"
                                (selectionChanged)="onOperationSelected($event)"
                                (removeButtonClicked)="removeOperation()">
        </winery-selectable-list>
    </div>

    <div *ngIf="isServiceTemplate; else inOutParameters">
        <winery-service-templates-target-interface
            [operation]="selectedOperation"></winery-service-templates-target-interface>
    </div>
    <ng-template #inOutParameters>
        <div class="generateButtons">
            <button class="btn btn-default btn-sm"
                    [disabled]="!selectedInterface" (click)="showGenerateImplementationModal();">
                Generate Implementation Artifact
            </button>
            <button class="btn btn-default btn-sm"
                    [disabled]="containsDefaultLifecycle()" (click)="generateLifecycleInterface()">
                Generate Lifecycle Interface
            </button>
        </div>

        <winery-io-parameter [inputParameters]="inputParameters" [outputParameters]="outputParameters">
        </winery-io-parameter>
    </ng-template>
</div>

<winery-modal bsModal #addIntOpModal="bs-modal" [modalRef]="addIntOpModal">
    <winery-modal-header [title]="modalTitle"></winery-modal-header>
    <winery-modal-body>
        <form #addElementForm="ngForm">
            <div class="form-group">
                <label for="interfaceName" class="control-label">Name</label>
                <input type="text"
                       class="form-control"
                       id="interfaceName"
                       name="interfaceName"
                       #newName="ngModel"
                       ngModel
                       required
                       [wineryDuplicateValidator]="validatorObject">
                <div *ngIf="newName.errors && (newName.dirty || newName.touched)"
                     class="alert alert-danger">
                    <div [hidden]="!newName.errors.wineryDuplicateValidator">
                        No duplicates allowed!
                    </div>
                    <div [hidden]="!newName.errors.required">
                        Name is required!
                    </div>
                </div>
            </div>
        </form>
    </winery-modal-body>
    <winery-modal-footer
        (onOk)="modalTitle === 'Interface' ? onAddInterface(newName.value) : onAddOperation(newName.value);"
        [closeButtonLabel]="'Cancel'"
        [okButtonLabel]="'Add'"
        [disableOkButton]="!addElementForm?.form.valid">
    </winery-modal-footer>
</winery-modal>

<winery-modal bsModal #removeElementModal="bs-modal" [modalRef]="removeElementModal">
    <winery-modal-header [title]="modalTitle"></winery-modal-header>
    <winery-modal-body>
        <p>
            Are you sure you want to remove <span style="font-weight:bold;">{{ elementToRemove }}</span>?
        </p>
    </winery-modal-body>
    <winery-modal-footer [closeButtonLabel]="'Cancel'" [okButtonLabel]="'Delete'"
                         [okButtonClass]="'btn-danger'"
                         (onOk)="onRemoveElement()"></winery-modal-footer>
</winery-modal>

<winery-modal bsModal #generateImplModal="bs-modal" [modalRef]="generateImplModal">
    <winery-modal-header [title]="'Generate Implementation Artifact'"></winery-modal-header>
    <winery-modal-body>
        <form *ngIf="!generating; else loadingGeneration" #generateForm="ngForm">
            <winery-component-exists [generateData]="implementation" [modalRef]="generateImplModal">
            </winery-component-exists>
            <p>
                There is no check for the name of the implementation artifact. The artifact template name will be reused
                as implementation artifact name without any further check.
            </p>
            <div *ngIf="artifactTypes && artifactTemplate.selectedInterface">
                <winery-component-exists [generateData]="artifactTemplate" [modalRef]="generateImplModal"
                                         [artifactTypes]="artifactTypes">
                </winery-component-exists>
            </div>
        </form>
        <ng-template #loadingGeneration>
            <winery-loader></winery-loader>
        </ng-template>
    </winery-modal-body>
    <winery-modal-footer
        [closeButtonLabel]="'Cancel'"
        [okButtonLabel]="'Generate'"
        [disableOkButton]="!(implementation.createComponent || artifactTemplate.createComponent)"
        (onOk)="generateImplementationArtifact()"
        (onCancel)="handleCancel()">
    </winery-modal-footer>
</winery-modal>
